<template>
  <div>
    <div class="outerView">
      <el-row :gutter="10">
        <el-col :xs="5" :sm="4" :md="4" :lg="6">
            <div class="grid-content">
                <!-- 其他功能 -->
            </div>
        </el-col>
        <el-col :xs="11" :sm="12" :md="12" :lg="10">
            <div class="grid-content">
                <ul class="headLi">
                    <li @click="to(1)">主页</li>
                    <li @click="to(2)">联系本人</li>
                    <li @click="to(3)">源码地址</li>
                    <li @click="to(4)">支付注意事项</li>
                </ul>
            </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8">
          <div class="grid-content">
            <ul class="headLi">
              <li @click="login" v-if="!loginState">登录</li>
              <li v-else class="info" @click="toCenter">{{loginInfo.username}}</li>
              <li :class="!loginState ? '' : 'info'">
                <span v-if="!loginState" @click="register">注册</span>
                <span v-else>您好！</span>
              </li>
              <li @click="toShopCart">购物车</li>
              <li @click="logout" v-if="loginState">退出</li>
              <li @click="goBackstage">进入后台</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="padding:0 150px">
      <router-view></router-view>
    </div>
    <div class="bottom">
      <div class="footer">
        2021 © shop by lzy <br><hr class="hr">
        <span>lzy商城平台</span>
        <p> <a href="http://beian.miit.gov.cn">备案号：湘ICP备2021002641</a></p>
      </div>
      
      <img :src="getImgUrl('bottom.png')" class="img" :width="'100%'" alt="bottom">
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data(){
    return {
      isLogin:false,
      loginInfo:{
        username:""
      }
    }
  },
  computed:{
    loginState:function(){
      if(this.$store.state.isLogin && this.$store.state.token!=""){
        return true
      }
      return false;
    },
  },
  mounted(){
    setTimeout(() => {
      this.loginInfo.username = window.localStorage.userName
    }, 100);
  },
  methods:{
    getImgUrl(url){
      return require("@/assets/img/"+url);
    },
    to(val){
      if(val==1){
        this.$router.push({path: "/"})
      }else if(val==2){
        this.$router.push({name: "findMe"})
      }else if(val==3){
        this.$router.push({name: "sourceCode"})
      }else if(val==4){
        this.$router.push({name: "other"})
      }
    },
    register(){
      this.$router.push({path: "/register"})
    },
    login(){
      this.$router.push("/login");
    },
    logout(){
      this.$store.commit('logout')
      window.localStorage.setItem('userCurrentState',"center")
      this.$router.push({
        path: '/login',
      })
    },
    toShopCart(){
      if(this.$store.getters.getIsLogin && this.$store.getters.getToken!=null){
        this.$router.push({
          path: '/shoppingCart',
        })
      }else{
        this.utils.tips.confirm("您好，您当前还没有登录，请先登录！",(val)=>{
          if(val){
            this.$router.push({
              path: '/login',
            })
          }
        })
      }
    },
    goBackstage(){
      this.$router.push({path: '/manage'});
    },
    toCenter(){
      this.$router.push({name: 'center'});
    }
  },
};
</script>

<style lang="less">
@import "~@/less/index.less";
.outerView {
  height: 40px;
  line-height: 40px;
  background-color: #333;
  color: #b0b0b0;
  font-size: 12px;
  .el-row{
    margin: 0px !important;
  }
  .headLi {
    list-style-type: none;
    height: 35px;
    margin: 0;
    li {
      cursor: pointer;
      float: left;
      margin-right: 10px;
    }
    li:hover{color: #F40;}
    .info:hover{
      color:  #b0b0b0;
    }
  }
}
.bottom{
  .footer{
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(49, 49, 49, 0.288);
    p{
      font-size: 14px;
      color: rgba(49, 49, 49, 0.288);
    }
  }
  // border-top: 3px solid rgb(255, 107, 0);
  margin-top: 30px;
  width: 100%;
  height: 30px;
}
</style>